<!-- 图库首页 -->
<template>
  <div class="conent_wrap">
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :pagination="false"
      :sortUrl="sortUrl"
      :showUrl="showUrl"
      @dataSourceChange="dataSourceChange"
      @selectedRowChange="getSelectedRow">
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="分类名称">
            <a-input
              v-decorator="['classificationName']"
              placeholder="请输入分类名称"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="分类所属">
            <a-select
              style="width: 150px"
              v-decorator="['seriesType', {initialValue: 0}]"
              placeholder="请选择分类所属"
            >
              <a-select-option :value="0"> 本店分类 </a-select-option>
              <a-select-option :value="1"> 其它店分类 </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <permission
          authority="gallery:classification:add"
          v-if="seriesType == 0"
        >
          <a-button
            type="primary"
            icon="plus"
            @click="classifyAdd(false, { add: 'add' })"
            >新增分类</a-button>
        </permission>
        <permission
          authority="gallery:classification:update:group"
          v-if="seriesType == 0"
        >
          <a-button
            type="primary"
            icon="edit"
            @click="changeParentFun">修改分组</a-button>
        </permission>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <permission
          v-if="record.classifyLevel != 3 && seriesType == 0"
          authority="gallery:classification:add"
        >
          <span
            class="text-primary pointer"
            @click="classifyAdd(true, { ...record, add: 'add' })"
            >添加子集</span
          >
        </permission>
        <a-divider
          type="vertical"
          v-if="record.classifyLevel != 3 && seriesType == 0"
        />
        <permission
          authority="gallery:classification:modify"
          v-if="seriesType == 0"
        >
          <span
            class="text-primary pointer"
            @click="openNew({ ...record, add: 'update' })"
            >编辑</span
          >
        </permission>
        <a-divider type="vertical" />
        <permission authority="gallery:classification:delete">
          <a-popconfirm
            title="是否确认删除？"
            :getPopupContainer="getPopupContainer()"
            @confirm="() => deleteRows([record.id])"
          >
            <a href="javascript:;" class="text-danger pointer">删除</a>
          </a-popconfirm>
        </permission>
      </template>
    </search-table>
    <classify-modal
      v-model="showModal"
      @handleSubmit="handleSubmit"
      :records="currentRecord"
      :childModal="childModal"
      :title="title"
    ></classify-modal>
    <!-- 修改分组 -->
    <change-parent
      ref="ChangeParentModal"
      @handleSubmit="handleSubmit"
      :ids="chooseIds"></change-parent>
  </div>
</template>

<script>
import ClassifyModal from "./components/ClassifyModal";
import ChangeParent from "./components/ChangeParent";
import SearchTable from "./components/SearchTable";
export default {
  name: "GalleryClassify",
  directives: {},
  filters: {},
  mixins: [],
  model: {},
  props: {},
  components: {
    ClassifyModal,
    ChangeParent,
    SearchTable,
  },
  data() {
    return {
      showModal: false,
      childModal: false,
      title: "新增分类",
      url: "/gallery/classification/tree/list",
      sortUrl: "/gallery/classification/sort",
      showUrl: "/gallery/classification/update",
      deleteUrl: "/gallery/classification/delete",
      form: this.$form.createForm(this, { name: "table_search" }),
      currentRecord: {},
      chooseRows: [],
      chooseIds: [],
      columns: [
        {
          title: "分类名称",
          dataIndex: "classificationName",
          key: "classificationName",
          customRender: (text, row) => {
            return (
              <a href="javascript:;" onClick={() => {}}>
                {text}
              </a>
            );
          },
        },
        {
          title: "排序",
          dataIndex: "sort",
          key: "sort",
          align: "center",
          scopedSlots: { customRender: "changeSort" },
        },
        {
          title: "是否显示",
          dataIndex: "enableShow",
          key: "enableShow",
          align: "center",
          scopedSlots: { customRender: "changeShow" },
        },
        {
          title: "产品图片",
          dataIndex: "pictureUrl",
          key: "pictureUrl",
          align: "center",
          customRender: (text, row) => {
            return <table-img src={text} />;
          },
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      seriesType: 0
    };
  },
  // 方法集合
  methods: {
    dataSourceChange(data) {
      this.seriesType = this.$refs.searchtable.searchParams.seriesType;
    },
    // 修改分组
    changeParentFun() {
      if(this.chooseRows.length == 0){
        return this.$message.warning("请先选择一项后再进行操作");
      }
      let res = this.chooseRows.filter(item => item.classifyLevel==1)
      if(res.length > 0){
        return this.$message.warning("不可选择第一级图库分类");
      }
      let ids = []
      this.chooseRows.forEach(item => {
        ids.push(item.id)
      })
      this.chooseIds = ids
      this.$refs.ChangeParentModal.visible = true
    },
    getPopupContainer() {
      return (triggerNode) => triggerNode.parentNode.parentNode;
    },
    bianping(arr) {
      var res = [];
      for (var i = 0; i < arr.length; i++) {
        var item = arr[i];
        if (item.children && item.children.length > 0) {
          res = res.concat(this.bianping(item.children));
        }
        res.push(item);
      }
      return res;
    },
    changeRank(row) {
      console.log(row);
    },
    initData(records) {
      let source = this.$refs.searchtable.dataSource;
      let array = this.bianping(source);
      array.reverse();
      if (records.parentId == 0) return records;
      
      if (records.parentId != 0) {
        let res = array.filter(item => {
          return records.parentId == item.id
        })
        if(res.length > 0){
          records.parentName = res[0].classificationName
        } else {
          records.parentName = ''
        }
        if(records.classifyLevel == 3 && records.parentIds) {
          console.log(records)
          let grandParentId = records.parentIds.split(',')[1]
          let grandRes = array.filter(item => {
            return grandParentId == item.id
          })
          if(grandRes.length > 0){
            records.grandParentName = grandRes[0].classificationName
          } else {
            records.grandParentName = ''
          }
        }
      } else {
        let res = source.filter(item => {
          return records.parentId == item.id
        })
        records.parentName = res[0].classificationName;
      }
      return records;
    },
    getSelectedRow(rows) {
      console.log("选择的", rows);
      this.chooseRows = rows
    },
    openNew(records) {
      this.currentRecord = this.initData(records);
      console.log(this.currentRecord)
      this.title = "编辑分类";
      if (records.parentId != 0) {
        this.childModal = true;
      } else {
        this.childModal = false;
      }
      console.log(records);
      this.showModal = true;
    },
    deleteRows(id) {
      this.$post(this.deleteUrl, { ids: id }).then((res) => {
        if (res && res.returnCode === 1000) {
          this.$refs.searchtable.refreshTable();
        }
      });
    },
    classifyAdd(childModal, record) {
      this.childModal = childModal;
      let resRecord = this.initData(record);
      console.log(record)
      this.currentRecord = {
        add: record.add,
        id: record.id,
        parentId: record.parentId,
        parentIds: record.parentIds,
        classificationName: ''
      }
      if (childModal) {
        this.title = "添加子级";
        this.currentRecord.classifyLevel = resRecord.classifyLevel+1
        if(this.currentRecord.classifyLevel == 2) {
          this.currentRecord.classificationName1 = resRecord.classificationName;
        } else if(this.currentRecord.classifyLevel == 3) {
          this.currentRecord.classificationName1 = resRecord.parentName;
          this.currentRecord.classificationName2 = resRecord.classificationName;
        }
      } else {
        this.title = "新增分类";
        this.currentRecord.classifyLevel = 1
      }
      this.showModal = true;
    },
    handleSubmit() {
      this.showModal = false;
      this.$refs.searchtable.refreshTable();
    },
  },
};
</script>
<style rel="stylesheet/less" lang="less" scoped>
</style>
